<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /** {*/
            /*padding: 0px;*/
            /*margin: 0px;*/
        /*}*/

        div {
            width: 50px;
            height: 50px;
            padding: 50px;
            border: 10px solid peru;
            /*solid peru设置边框线条为peru*/
            margin: 30px;
            background-color: red;
        }

        .two {
            /*
            padding可以直接写4个方向的距离,
            4个:上右下左(从上开始顺时针排)
            3个:上右下 左没写会与右保持一致
            2个:上右   左与右一致,下与上一致
            */
            padding: 10px 20px 30px 40px;
            /*padding-top: 10px;*/
            /*padding-bottom: 20px;*/
            /*padding-left: 30px;*/
            /*padding-right: 40px;*/
            background-color: #f00;
        }

        .three {
            width: 50px;
            background-color: #fff;
            padding: 10px;
            padding-bottom: 20px;
            /*如果想要覆盖,切记用小属性去叠大属性*/
        }

    </style>
</head>
<body>
<!--什么标签是盒子
所有里面能放东西的标签都是盒子
比如:div,span,a
比如img,表单...就不是盒子

一个盒子主要由4部分组成:
内容:设置的宽高就是设置内容的宽高
padding:内容到边框的距离
border:边框的粗细
margin:从边框以外多少地方不能有其他元素(设置背景颜色设置不了)
-->

<div>
    阿瓦带大家奖金拉丝了阿萨
</div>
<div>
    <img src="http://placekitten.com/50/50">
</div>
<div class="two">
    <img src="http://placekitten.com/50/50">
</div>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
</body>
</html>